<script>
import {getUser} from "../../utils/utils";

export default {
  name: "ShoppingCart",
  data(){
    return{
      user:{},
      page:{},
      pageSize:5,
      multipleSelection: [],
      totalCost:0,
      visible:false,
    }
  },
  methods:{
    creatOrder(){
      this.visible=false
      let ids=[]
      let fd=new FormData
      this.multipleSelection.forEach(cart=>{
        ids.push(cart.id)
      })
      fd.append('ids',ids)
      fd.append('userId',this.user.id)
      fd.append('totalCost',this.totalCost)
      this.$axios.post('order/creatOrder',fd).then(resp=>{
        if (resp.data.flag){
          this.$message.success(resp.data.msg)
          this.paging(1)
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    del(id){
      this.$axios.post('cart/del?productId='+id).then(resp=>{
        if (resp.data.flag){
          this.$message.success(resp.data.msg)
          this.paging(1)
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.paging(1)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.totalCost=0
      val.forEach(cart=>{
        this.totalCost+=cart.cost
      })
    },
    paging(curPage){
      this.$axios.get('cart/list?curpage='+curPage+'&pageSize='+this.pageSize+'&userId='+this.user.id).then(resp=>{
        if (resp.data.flag){
          this.page=resp.data.data
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    }
  },
  created() {
    this.user=getUser()
    this.paging(1)
  }
}
</script>

<template>
<div>
  <span>总价格：{{totalCost}}</span>
  <el-button size="small" :disabled="multipleSelection.length===0" v-if="multipleSelection.length===0">生成订单</el-button>
  <el-popover
    placement="top"
    width="160"
    v-model="visible"
    v-if="multipleSelection.length>0"
  >
    <p>确认生成订单？</p>
    <div style="text-align: right; margin: 0">
      <el-button size="mini" type="text" @click="visible = false">取消</el-button>
      <el-button type="primary" size="mini" @click="creatOrder">确定</el-button>
    </div>
    <el-button slot="reference" size="small">生成订单</el-button>
  </el-popover>
  <el-table
    :data="page.list"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="product.name"
      label="商品名称"
      width="180">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      label="封面">
      <template slot-scope="scope">
        <div>
          {{ scope.row.status }}
          <img :src="scope.row.product.coverPath" style="width: 80px">
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="product.describe"
      label="描述"
      width="180">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      label="图片">
      <template slot-scope="scope">
        <div class="photo-container">
          {{ scope.row.status }}
          <img :src="photo.photopath" width="33.33%" v-for="photo in scope.row.product.photoList">
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="number"
      label="购买数量">
    </el-table-column>
    <el-table-column
      prop="cost"
      label="小计">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      label="操作">
      <template slot-scope="scope">
        {{ scope.row.status }}
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    style="display: flex;  justify-content: center;"
    @size-change="handleSizeChange"
    @current-change="paging"
    :current-page="page.pageNum"
    :page-sizes="[5,10,15,20]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="page.total">
  </el-pagination>
</div>
</template>

<style scoped>

</style>
